<template>
  <div class="count-box">
    <!-- ------------------------日历------------------------ -->
    <div class="calendar-box">
        <div class="select-box">
            <!-- 选择月 -->
            <el-date-picker v-model="dateValue" type="month" :clearable="false" format="yyyy年MM月" prefix-icon="el-icon-caret-bottom" @change="selMonthFN"></el-date-picker>
        </div>
        
        <!-- 选择的统计者 -->
        <div class="selPerson">
            <div class="selFormItem">统计者：</div>
            <el-select v-model="userList" multiple placeholder="请选择">
                <el-option
                    v-for="item in circleList"
                    :key="item.userId"
                    :label="item.nickname"
                    :value="item.userId">
                </el-option>
            </el-select>
        </div>

        <!-- 日历 -->
        <el-calendar v-model="dateValue" :range="weekStartTime ? [weekStartTime, weekEndTime] : []">
            <template slot="dateCell" slot-scope="{ data }">
                <div :class="dateList.includes(data.day) ? 'is-sel' : ''" @click="clickItemDate(data)"><span>{{ data.day.split('-')[2] }}</span></div>
            </template>
        </el-calendar>

        <!-- 展开收起箭头 -->
        <svg-icon
            icon-class="shouqi_icon"
            class="sq_arr"
            :class="weekStartTime ? '' : 'zk_arr'"
            @click="packOrUnfold"
        />
    </div>
    <!-- ------------------------日历------------------------end -->

    <!-- 底部查询按钮 -->
    <div class="bottom_btn">
        <SubBtn>
          <template slot="btn">
            <el-button round @click="submit">查询</el-button>
          </template>
        </SubBtn>
    </div>
  </div>
</template>

<script>
import SubBtn from "@/components/subBtn/subBtn.vue";
import { getSelectUserByCircleApi } from "@/BMViews/api/budget/budgetService.js";
import { transferTime, timestampToTime } from "@/wss/utils/wss.js";
export default {
    name: 'count',
    components:{
        SubBtn
    },
    data(){
        return{
            dateValue: new Date(), //当前日期
            weekStartTime: "", //当前选择这周第一天
            weekEndTime: "", //当前选择这周最后一天

            circleList: [],//当前圈子成员

            dateList: [],//选择的日期列表
            userList: [],//选择的统计者
        }
    },
    mounted(){
      // this.goInit() // 初始化调用
    },
    methods:{
        // 初始化调用
        goInit(){
          this.getWeekStartEnd() // 获取选择这周的第一天和最后一天
          this.getCircleMembersFn() // 获取当前圈子成员列表
          if(!this.dateList.length){
            this.getNowDate() // 获取当前日期
          }
        },

        // ---------------------------------选择统计者------------------------
        // 获取当前圈子成员列表
        async getCircleMembersFn(){
            let data = {
                circleId: this.$store.state.user.userInfo.whereCircleId,//当前圈子
                type: '0,1'
            }
            let result = await getSelectUserByCircleApi(data)
            if(result.code==200){
                this.circleList = result.rows
            }
        },
        // ---------------------------------选择统计者------------------------end

        // ---------------------------------日历------------------------
        // 选择月份
        selMonthFN(){
            this.getWeekStartEnd() // 获取选择这周的第一天和最后一天
        },

        // 获取选择这周的第一天和最后一天
        getWeekStartEnd() {
            let date = this.dateValue;
            //本周第一天
            let weekStartTime = new Date(
                new Date(date).getTime() -
                3600 *
                    1000 *
                    24 *
                    (new Date(date).getDay() == 0 ? 6 : new Date(date).getDay() - 1)
            );
            //本周最后一天
            let weekEndTime = new Date(
                new Date(date).getTime() +
                3600 *
                    1000 *
                    24 *
                    (new Date(date).getDay() == 0 ? 0 : 7 - new Date(date).getDay(date))
            );
            this.weekStartTime = transferTime(weekStartTime); //本周第一天
            this.weekEndTime = transferTime(weekEndTime); //本周最后一天
        },

        // 获取上一个月
        getPrevMonth() {
            let nextMonth = this.dateValue;
            let y = nextMonth.getFullYear();
            let m = nextMonth.getMonth();
            let res = new Date(y, m, 0); //上个月0最后一天
            this.dateValue = res;
        },

        // 获取下一个月
        getNextMonth() {
            let nextMonth = this.dateValue;
            let y = nextMonth.getFullYear();
            let m = nextMonth.getMonth() + 1;
            let res = new Date(y, m, 1); //下个月1第一天
            this.dateValue = res;
        },

        // 点击收起展开按钮
        packOrUnfold() {
            if (this.weekStartTime == "" || this.weekEndTime == "") {
                this.getWeekStartEnd(); // 获取选择这周的第一天和最后一天
            } else {
                this.weekStartTime = ""; //清空选择本周第一天
                this.weekEndTime = ""; //清空选择本周最后一天
            }
        },

        // 获取当前日期
        getNowDate(){
            let time = new Date()
            let y = time.getFullYear() //获取完整的年份(4位,1970-???)
            let m = time.getMonth() < 9 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1 //获取当前月份(0-11,0代表1月)
            let d = time.getDate() < 9 ? '0'+time.getDate() : time.getDate()//获取当前日(1-31)
            this.dateList.push(`${y}-${m}-${d}`)
        },

        // 点击日期
        clickItemDate(data){
            let day = data.day
            if(this.dateList.includes(day)){
                // 有就把里面的删掉
                let index = this.dateList.indexOf(day)
                this.dateList.splice(index,1) // 根据下标去删数据
            }else{
                // 没有就加进去
                this.dateList.push(day)
            }
        },
        // ---------------------------------日历------------------------end

        // 点击查询按钮
        submit(){
          if(!this.userList.length){
            this.$message({message: '请选择统计者',type: 'warning'});
            return
          }
          if(!this.dateList.length){
            this.$message({message: '请选择日期',type: 'warning'});
            return
          }
          this.$emit('countEmit',this.userList,this.dateList)
        },
    },
}
</script>

<style lang="scss" scoped>
// ----------------------日历样式----------------------
.calendar-box {
  margin: 15px 20px;
  background-color: #f7f7f7;
  border-radius: 8px;
  padding: 15px;
  overflow: hidden;
  .sq_arr {
    display: block;
    margin: 0 auto;
    font-size: 20px;
    cursor: pointer;
  }
  .zk_arr {
    transform: rotate(180deg);
  }
}

.selectMonth {
  // i {
  //   cursor: pointer;
  //   margin-left: 10px;
  //   font-size: 18px;
  // }
  .allBtn {
    padding: 4px 12px;
    background-color: transparent;
    &:hover{
        border-color: #DCDFE6;
        color: #606266;
    }
  
  }
  .isActive {
    border-color: #f87a23;
    color: #f87a23;
    &:hover{
        border-color: #f87a23;
        color: #f87a23;
    }
  }
}
.el-calendar {
  position: relative;
  background-color: #f7f7f7;
  ::v-deep .el-calendar__header {
    display: none;
  }
  ::v-deep .el-calendar__body {
    padding: 0px;
  }
  ::v-deep .el-calendar-table {
    thead {
      th {
        font-size: 12px;
      }
    }
    td {
      border: 0;
      &:hover {
        background-color: transparent;
      }
    }
    .el-calendar-day {
      height: auto;
      text-align: center;
      font-size: 12px;
      span {
        display: block;
        margin: 0 auto;
        width: 24px;
        height: 24px;
        text-align: center;
        line-height: 24px;
      }
    }
    .is-sel {
      background-color: transparent;
      span {
        background-color: #f19b32;
        color: #fff;
        border-radius: 50%;
      }
    }
    .is-today {
      color: #f87a23;
    }
  }
}
// ----------------------日历样式----------------------end

// 选择统计者
.selPerson{
    display: flex;
    align-items: center;
    padding: 10px 0;
    margin: 10px 0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
    color: #999;
    .el-select{
        width: calc(100% - 56px);
        line-height: 34px;
    }
}

/* 底部按钮 */
 .bottom_btn{
 ::v-deep.subBtn {
  justify-content: flex-end;
  align-items: center;
  padding: 10px 30px;
 }
 .el-button{
  color: #f87a23 !important;
  border-color: #f87a23;
  background-color: #fff;
}
}
</style>

<style scoped>
/* 选择日期样式 */
.calendar-box .el-date-editor.el-input {
  width: 120px;
}
.calendar-box >>> .el-input__inner {
  border: 0;
  padding-left: 0;
  /* font-weight: bold; */
  color: #333;
  background-color: transparent;
  height: 20px;
  line-height: 20px;
}
.calendar-box >>> .el-input__prefix {
  width: 25px;
  left: auto;
  right: 15px;
  top: -10px;
  color: #333;
}
</style>